<template>
  <div>
    <el-date-picker
      v-model="time"
      type="datetime"
      :placeholder="placeholder"
      default-time="12:00:00"
      @click.stop
    >
    </el-date-picker>
  </div>
</template>

<script>
import { toMs } from "@/util/tool";
export default {
  data() {
    return {
      time: "",
    };
  },
  props: {
    timeType: String,
    type: String,
    beginTime: Date,
    cutOffTime: Date,
    startTime: String,
    endTime: String,
    placeholder: String,
    currTaskSetTimeObj: Object,
  },
  watch: {
    time(n) {
      if (
        this.timeType == "start" &&
        this.toMs(n) > this.toMs(this.endTime) &&
        this.endTime
      ) {
        this.time = "";
        return;
      } else if (
        this.timeType == "end" &&
        this.toMs(n) < this.toMs(this.startTime) &&
        this.startTime
      ) {
        this.time = "";
        return;
      } else {
        this.$emit("handleChangeTime", n, this.timeType);
      }
    },
    beginTime(newValue) {
      this.time = newValue;
    },
    cutOffTime(newValue) {
      this.time = newValue;
    },
    currTaskSetTimeObj(newValue) {
      this.handleSetValue();
    },
  },
  methods: {
    toMs(data) {
      return !data ? 0 : new Date(data).getTime();
    },
    handleSetValue() {
      if (this.type === "task") {
        if (this.timeType === "start") {
          this.time = this.currTaskSetTimeObj?.beginTime;
        } else {
          this.time = this.currTaskSetTimeObj?.cutOffTime;
        }
      }
    },
  },
  mounted() {
    this.handleSetValue();
  },
};
</script>

<style lang="stylus"></style>